<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/css/editor.css">
    <link rel="stylesheet" href="/css/highlight.css">
    <script src="/js/marked.min.js"></script>
    <script src="/js/highlight.min.js"></script>
</head>

<body>
  <form action="<%= saveurl %>" method="post" id="editor-form">
    <div class="editor-toolbar">
      <label class="editor-save" title="Save">
        <input type="submit" value="Save" style="display: none"/>
        <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="save" class="svg-inline--fa fa-save fa-w-14" 
          role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" height="30">
          <path d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 
            80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM272 80v80H144V80h128zm122 352H54a6 6 0 
            0 1-6-6V86a6 6 0 0 1 6-6h42v104c0 13.255 10.745 24 24 24h176c13.255 0 24-10.745 24-24V83.882l78.243 78.243a6 6 0 0 1 1.757 
            4.243V426a6 6 0 0 1-6 6zM224 232c-48.523 0-88 39.477-88 88s39.477 88 88 88 88-39.477 88-88-39.477-88-88-88zm0 128c-22.056 
            0-40-17.944-40-40s17.944-40 40-40 40 17.944 40 40-17.944 40-40 40z"/>
        </svg>
      </label>
      <label class="editor-preview" title="Preview">
        <button type="button" id="preview" style="display: none"></button>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" height="30">
          <path d="M288 144a110.94 110.94 0 0 0-31.24 5 55.4 55.4 0 0 1 7.24 27 56 56 0 0 1-56 56 55.4 55.4 0 0 1-27-7.24A111.71 111.71 
            0 1 0 288 144zm284.52 97.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 
            165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400c-98.65 0-189.09-55-237.93-144C98.91 167 189.34 
            112 288 112s189.09 55 237.93 144C477.1 345 386.66 400 288 400z"/>
        </svg>
      </label>
    </div>
    <textarea id="content" name="content"><%= content %></textarea>
  </form>
  <main><article id="render"></article></main>

  <script>
    // preview functionality
    document.getElementById('preview').onclick = function() {
      var contentEl = document.getElementById('content');
      var renderEl = document.getElementById('render');
      var content = contentEl.value.replace(/^-+\n[\s\S]*-+\n/, "");

      if (renderEl.innerHTML.length == 0) {
        marked.setOptions({
          renderer: new marked.Renderer(),
          highlight: function(code, lang) {
            const language = hljs.getLanguage(lang) ? lang : 'plaintext';
            return hljs.highlight(code, { language }).value;
          },
          langPrefix: 'hljs language-'
        });

        renderEl.innerHTML = marked(content);
        contentEl.style = "display: none";
      }
      else {
        renderEl.innerHTML = "";
        contentEl.style = "";
      }
    }

    // drag and drop support for image uploads
    let dropArea = document.getElementById('editor-form');

    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
      dropArea.addEventListener(eventName, e => {e.preventDefault(); e.stopPropagation()}, false);
    });

    dropArea.addEventListener('drop', e => {
      e.preventDefault();

      let files = e.dataTransfer.files;

      ([...files]).forEach(file => {
        let formData = new FormData();
        formData.append('image', file);

        fetch('/upload', {
          method: 'POST',
          body: formData
        })
        .then(() => {
          var contentEl = document.getElementById('content');
          const [start, end] = [contentEl.selectionStart, contentEl.selectionEnd];
          var markup = `![${file.name}](/media/${file.name}) `;
          contentEl.setRangeText(markup, start, end, 'select');
          contentEl.selectionStart = start + markup.length;
          contentEl.selectionEnd = end + markup.length;
         })
        .catch(() => {})
      })
    }, false);
  </script>
</body>

</html>